<template>
  <div class="app">
    <Header/>
    <div class="backorg">
      <div class="longe"></div>
      <div class="banna">
        <div class="banna1">
          <div><img src="@/assets/img/f6e7d300928e671c44f5c6f97305045.png" alt=""></div>
          <div><img src="@/assets/img/16f350b4b4ff76d40c2249533f7fb4f.png" alt=""></div>
        </div>
        <div class="banna2">
          <img src="@/assets/img/0066dc6aa3c053d4894e2c6987e07bc.jpg" alt="">
        </div>
        <div class="banna3">
          <div><img src="@/assets/img/61d79eed9208db2476b98ab3bc01358.png" alt=""></div>
          <div><img src="@/assets/img/d7884a794077e8d26a77476fe1e6b4b.png" alt=""></div>
        </div>
      </div>
      <div class="classlist">
        <div class="list_img"><img src="@/assets/img/fn.png" alt=""></div>
        <div class="list_h"><router-link to="/guessing">正在进行</router-link></div>
        <div class="list_h"><router-link to="/guessing1">即将上新</router-link></div>
        <div class="list_h"><router-link to="/guessing2">往期回顾</router-link></div>
      </div>
      <div class="sblist">
        <div class="listsoen">
          <div class="lsee">
            <router-link to="/details32"><div class="imglsee"><img src="@/assets/img/aa.png" alt=""></div></router-link>
            <div class="adaer">
              <router-link to="/details32"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p class="adfafoen">价格：<span>?</span> 元</p>
              <p>奖品数量：20个</p> 

              <p class="asfaafafaf">参考范围：<span>0</span> <span>100</span></p>
              <p>活动时间：2019.11.4-2019.11.9</p>
              <div class="ababc">
                <router-link to="/details32"><div class="bullo">查看详情</div></router-link>
                <div class="bullo" @click="lshezt()">设置提醒</div>
              </div>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details32"><div class="imglsee"><img src="@/assets/img/ww.png" alt=""></div></router-link>
            <div class="adaer">
              <router-link to="/details32"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p class="adfafoen">价格：<span>?</span> 元</p>
              <p>奖品数量：20个</p> 

              <p class="asfaafafaf">参考范围：<span>0</span> <span>100</span></p>
              <p>活动时间：2019.11.4-2019.11.9</p>
              <div class="ababc">
                <router-link to="/details32"><div class="bullo">查看详情</div></router-link>
                <div class="bullo">设置提醒</div>
              </div>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details32"><div class="imglsee"><img src="@/assets/img/ee.png" alt=""></div></router-link>
            <div class="adaer">
              <router-link to="/details32"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p class="adfafoen">价格：<span>?</span> 元</p>
              <p>奖品数量：20个</p> 

              <p class="asfaafafaf">参考范围：<span>0</span> <span>100</span></p>
              <p>活动时间：2019.11.4-2019.11.9</p>
              <div class="ababc">
                <router-link to="/details32"><div class="bullo">查看详情</div></router-link>
                <div class="bullo">设置提醒</div>
              </div>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details32"><div class="imglsee"><img src="@/assets/img/rr.png" alt=""></div></router-link>
            <div class="adaer">
              <router-link to="/details32"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p class="adfafoen">价格：<span>?</span> 元</p>
              <p>奖品数量：20个</p> 

              <p class="asfaafafaf">参考范围：<span>0</span> <span>100</span></p>
              <p>活动时间：2019.11.4-2019.11.9</p>
              <div class="ababc">
                <router-link to="/details32"><div class="bullo">查看详情</div></router-link>
                <div class="bullo">设置提醒</div>
              </div>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details32"><div class="imglsee"><img src="@/assets/img/aa.png" alt=""></div></router-link>
            <div class="adaer">
              <router-link to="/details32"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p class="adfafoen">价格：<span>?</span> 元</p>
              <p>奖品数量：20个</p> 

              <p class="asfaafafaf">参考范围：<span>0</span> <span>100</span></p>
              <p>活动时间：2019.11.4-2019.11.9</p>
              <div class="ababc">
                <router-link to="/details32"><div class="bullo">查看详情</div></router-link>
                <div class="bullo">设置提醒</div>
              </div>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details32"><div class="imglsee"><img src="@/assets/img/ww.png" alt=""></div></router-link>
            <div class="adaer">
              <router-link to="/details32"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p class="adfafoen">价格：<span>?</span> 元</p>
              <p>奖品数量：20个</p> 

              <p class="asfaafafaf">参考范围：<span>0</span> <span>100</span></p>
              <p>活动时间：2019.11.4-2019.11.9</p>
              <div class="ababc">
                <router-link to="/details32"><div class="bullo">查看详情</div></router-link>
                <div class="bullo">设置提醒</div>
              </div>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details32"><div class="imglsee"><img src="@/assets/img/ee.png" alt=""></div></router-link>
            <div class="adaer">
              <router-link to="/details32"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p class="adfafoen">价格：<span>?</span> 元</p>
              <p>奖品数量：20个</p> 

              <p class="asfaafafaf">参考范围：<span>0</span> <span>100</span></p>
              <p>活动时间：2019.11.4-2019.11.9</p>
              <div class="ababc">
                <router-link to="/details32"><div class="bullo">查看详情</div></router-link>
                <div class="bullo">设置提醒</div>
              </div>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details32"><div class="imglsee"><img src="@/assets/img/rr.png" alt=""></div></router-link>
            <div class="adaer">
              <router-link to="/details32"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p class="adfafoen">价格：<span>?</span> 元</p>
              <p>奖品数量：20个</p> 

              <p class="asfaafafaf">参考范围：<span>0</span> <span>100</span></p>
              <p>活动时间：2019.11.4-2019.11.9</p>
              <div class="ababc">
                <router-link to="/details32"><div class="bullo">查看详情</div></router-link>
                <div class="bullo">设置提醒</div>
              </div>
            </div>
          </div>
          

        </div>
        <Advertisement/>
      </div>
    </div>

    <Footer/>
  </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import Advertisement from '@/components/Advertisement'
export default {
  name: 'guessing',
  components: { 
    Header,
    Footer,
    Advertisement
  },
  data () {
    return {
    }
  },
  methods:{
    lshezt(){
      this.$message({
          message: '提醒设置成功,在活动开始前5分钟我们会通知你',
          type: 'success'
        });
    }
  }
}
</script>
<style scoped>
.backorg {
  background-color: #f06048;
  /* height: 3000px; */
}
.app  /deep/ .ist_l li:nth-child(3){
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.longe {
  height: 20px;
}
.banna {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}  
.banna img {
  transition: all .5s;
}
.banna img:hover {
  transform:scale(1.02);
}

.banna1 {
  height: 576px;
  width: 284px;
  margin: 10px 0 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
} 
.banna1 div {
  width: 280px;
  height: 280px;
	border-radius: 16px;
}
.banna1 div img {
  width: 280px;
  height: 280px;
  	border-radius: 16px;

}
.banna2 {
  height: 576px;
  width: 560px;
  margin: 10px 0px 0 10px;
}
.banna2 img {
  height: 576px;
  width: 560px;
  border-radius: 18px
} 
.banna3 {
  height: 576px;
  width: 284px;
  margin: 9px 18px 0 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
} 
.banna3 div {
  width: 280px;
  height: 280px;

	border-radius: 16px;
}
.banna3 div img {
  width: 280px;
  height: 280px;
  border-radius: 16px;
} 
.classlist {
  width: 1200px;
  height: 60px;
  margin: 25px auto;
  display: flex;
  justify-content: space-between;
}
.classlist .list_img {
  width: 90px;
	height: 60px;
	background-color: #efc8c7;
}
.classlist .list_img img{
  width: 90px;
	height: 60px;
}
.classlist .list_h {
	width: 370px;
	line-height:60px;
	border: solid 1px #a0a0a0;
  text-align: center;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
.sblist {
  width: 1200px;
  /* height: 2000px; */
  margin: -25px auto;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
}
.listsoen {
  width: 900px;
  /* height: 2000px; */
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.listsoen .lsee{
  width: 430px;
	height: 224px;
  margin: 10px;
  display: flex;
  justify-content: space-between;
	background-color: #ffffff;
	box-shadow: 0px 2px 2px 0px 
		rgba(22, 22, 22, 0.25);
}
.listsoen .lsee .imglsee {
  width: 224px;
	height: 224px;
}
.listsoen .lsee .imglsee img{
  width: 224px;
	height: 224px;
}
.lsee .adaer h4 {
  font-family: SourceHanSansCN-Regular;
	font-size: 17px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 27px;
	letter-spacing: 0px;
	color: #313131;
  margin: 6px 0px 8px 5px;
}
.lsee .adaer p {
  font-size: 14px;
  color: #959595;
  line-height: 23px;
}
.adaer .bullo {
	width: 90px;
	line-height: 30px;
  text-align: center;
	border-radius: 15px;
	border: solid 1px #f06048;
  color: #f06048;
  font-size: 17px;
  margin: 26px auto;
}
.adaer .bullo:hover {
  background-color: #f06048;
  color: #fff;
  cursor: pointer;
}
.list_h a{
  width: 370px;
  line-height: 60px;
  color: #fff;
  display: inline-block;
}
.list_h a:hover {
  color: #fff;
  background-color: #610800
}
.list_h .router-link-exact-active {
  color: #fff;
  background-color: #610800
}
.asfaafafaf span {
  background-color: #f06048;
  color: #fff;
  display: inline-block;
  padding-left: 3px;
  padding-right: 3px;
}
.adfafoen span{
  color: #f06048;
  font-size: 22px
}
.ababc {
  display: flex;
  justify-content: space-between;
}
</style>